<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>修改信息</title>
		<script src="../static/js/jquery.js"></script>
	</head>
	
	<style>
	
		.icon-input{
			position: absolute;
			top: 1px;
			left: 1px;
			width: 30px;
			height: 27px;
			display: inline-block;
		}
		
		.icon-user{
			background: url('../static/images/icon/icon-user.png') no-repeat center;
		}
		
		.icon-pwd{
			background: url(../static/images/icon/icon-pwd.png) no-repeat center;
		}
		
		.icon-phone{
			background: url(../static/images/icon/icon-phone.png) no-repeat center; 
		}
		
		.icon-email{
			background: url(../static/images/icon/icon-email.png) no-repeat center;
		}
		
		.icon-schoolID{
			background: url(../static/images/icon/icon-schoolID.png) no-repeat center;
		}
		
		.icon-studentverify{
			background:  url(../static/images/icon/icon-studentverify.png) no-repeat center;
		}
		
		.icon-time{
			background: url(../static/images/icon/icon-time.png) no-repeat center;
		}
		
		.icon-name{
			background: url(../static/images/icon/icon-name.png) no-repeat center;
		}
	
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		
		a{
			display: block;
			text-decoration: none;
			color: white;
		}
		
		body{
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			background-image: linear-gradient(37deg, rgb(100, 207, 189), rgb(37, 185, 223));
		}
		
		.main-contaner{
			width: 370px;
			height: fit-content;
			
			padding-bottom: 37px;
			
			text-align: center;
			border-radius: 10px;
			background-color: white;
			box-shadow: 0 4px 3px rgba(80, 80, 80, .3);
		}
		
		.main-contaner h2{
			margin-top: 17px;
			font-family: "Simsun";
		}
		
		.main-contaner .form-box{
			width: 90%;
			padding-top: 17px;
			margin: 0 auto;
		}
		
		.main-contaner .row-input{
			width: 100%;
		}
		
		.main-contaner .form-box .input-divider{
			display: inline-block;
			margin: 0 17px;
		}
		
		.main-contaner .form-box .inline-div{
			position: relative;
			display: inline-block;
			background-color: #d5d5d5;
			border-radius: 3px;
			height: 30px;
			
			margin-top: 12px;
			z-index: 2;
			box-shadow: 0 3px 4px 0 rgb(0 0 0 / 4%);
		}
		
		.form-box .inline-div a{
			margin-right: 7px;
			display: inline-block;
			color: #0c96ff;
			font-size: 14px;
			cursor: pointer;
		}
		
		.form-box .inline-div #a-ban{
			color: #ff0565;
		}
		
		.form-box .inline-div input{
			width: 200px;
			height: 30px;
			line-height: 20px;
			padding-left: 4px;
			font-size: 14px;
			display: inline-block;
			border: none;
			outline: none;
			border: 1px solid #D5D5D5;
			margin-left: 30px;
		}
		
		.btn{
			width: 147px;
			height: 37px; 
			background-color: #D5D5D5;
			border: 1px solid #D5D5D5;
			font-size: 17px;
			margin-top: 37px;
			text-align: center;
			color: #232323;
			
			padding: 4px 7px;
			border-radius: 7px;
			cursor: pointer;
		}
	</style>
	
	<body onload="start();">
		
		<div class="main-contaner card-box">
			<h2>修改信息</h2>
			<div class="form-box">
				<form>
					<div class="row-input">
						<div class="inline-div">
							<span class="icon-user icon-input"></span>
							<input type="text" name="code" id="input-code" value="" placeholder="用户名称" />
							<a onclick="updateInfo('name', $('#input-code').val())">修改</a>
						</div>
					</div>
					
					<div class="row-input">
						<div class="inline-div">
							<span class="icon-pwd icon-input"></span>
							<input type="password" readonly="readonly" name="pwd" id="input-pwd" value="8208208820"/>
							<a id="a-ban" href="#">修改</a>
						</div>
					</div>
					
					<div class="row-input">
						<div class="inline-div">
							<span class="icon-name icon-input"></span>
							<input type="text" name="nike_name" id="input-nick" value="" placeholder="用户昵称" />
							<a onclick="updateInfo('nick', $('#input-nick').val())">修改</a>
						</div>
					</div>
					
					<div class="row-input">
						<div class="inline-div">
							<span class="icon-phone icon-input"></span>
							<input type="text" name="phone" id="input-phone" value="" placeholder="用户电话" />
							<a onclick="updateInfo('phone', $('#input-phone').val())">修改</a>
						</div>
					</div>
					
					<div class="row-input">
						<div class="inline-div">
							<span class="icon-time icon-input"></span>
							<input type="text" readonly="readonly" id="input-create" value="" placeholder="创建时间" />
							<a id="a-ban" href="#">修改</a>
						</div>
					</div>
					
					<div class="row-input">
						<div class="inline-div">
							<span class="icon-time icon-input"></span>
							<input type="text" readonly="readonly" id="input-last" value="" placeholder="最后一次登录时间" />
							<a id="a-ban" href="#">修改</a>
						</div>
					</div>
					
					<!-- <div class="row-input">
						<button class="btn">
							一键修改
						</button>	
					</div> -->
				</form>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		function updateInfo(param, val){
			$.ajax({
				url: './modifyUserInfo?' + param + "=" + val,
				success: function(res){
					alert(res);
					location.reload();
				},
			});
		}
	
		function fitInput(code, nick, tel, create, last){
			$('#input-code').val(code);
			$('#input-nick').val(nick);
			$('#input-phone').val(tel);
			$('#input-create').val(create);
			$('#input-last').val(last);
		}
		
		function start(){
			$.ajax({
				url: './query',
				success: function(res){
					console.log(res)
					fitInput(res['name'], res['nick'], res['phone'], res['create'], res['last']);
				},
			});
		}
	</script>
</html>